<template>
  <div>
    <h1>会员等级修改页面</h1>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">会员等级名称</td>
          <td><input type="text" v-model="info.LevelName" /></td>
        </tr>
        <tr>
          <td align="right">累计消费金额</td>
          <td><input type="text" v-model="info.Moeny" /></td>
        </tr>
        <tr>
          <td align="right">权益名称</td>
          <td>
            <p><input type="checkbox" v-model="checked" @click="checkAll" /></p>
            <p>
              <span v-for="item in rights">
                <input
                  type="checkbox"
                  v-model="info.Rights"
                  :value="item.RightName"
                  @change="checkOne"
                />{{ item.RightName }}
              </span>
            </p>
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="修改"
              class="btn btn-primary"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

//声明一个变量存储向后端做等级增加时传递的数据
let info: any = reactive({
  LevelName: '',
  Moeny: '',
  Rights: [],
});

let rights: any = ref([]);

let checked: any = ref(false);

onMounted(() => {
  rightList();
  getData();
});

//2.返填
const getData = () => {
  axios({
    url: '/api/Members/UpdateMemberLevel',
    method: 'get',
    params: {
      id: route.query.id,
    },
  })
    .then((res) => {
      console.log(res);
      Object.assign(info, res.data);
      info.Rights = res.data.Rights.split(',');
      checkOne();
    })
    .catch((err) => {
      console.log(err);
    });
};

//获取权益列表
const rightList = () => {
  axios({
    url: '/api/Members/GetMemberRightsList',
    method: 'get',
  })
    .then((res) => {
      console.log(res);
      rights.value = res.data;
      checkOne();
    })
    .catch((err) => {
      console.log(err);
    });
};

//全选与全不选
const checkAll = () => {
  checked.value = !checked.value;
  if (checked.value == true) {
    info.Rights = rights.value.map((item: any) => {
      return item.RightName;
    });
  } else {
    info.Rights = [];
  }
};
//选中一个
const checkOne = () => {
  if (rights.value.length == info.Rights.length) {
    checked.value = true;
  } else {
    checked.value = false;
  }
};

//增加操作
const ok = () => {
  //1.有效性验证
  if (info.LevelName == '') {
    alert('等级名称不能为空');
    return;
  }

  if (info.Moeny == '') {
    alert('累计消费金额不能为空');
    return;
  }
  //2.发送网络请求提交数据
  info.Rights = info.Rights.toString();
  axios({
    url: '/api/Members/MemberLevelAdd',
    method: 'post',
    data: info,
  })
    .then((res) => {
      //表示请求成功的结果
      console.log(res);
      if (res.data == -1) {
        alert('等级名称重复');
        return;
      }

      if (res.data > 0) {
        alert('添加成功');
        //添加成功后跳转显示列表页面
        router.push('/memberLevelList'); //造出路由
      } else {
        alert('添加失败');
        return;
      }
    })
    .catch((err) => {
      //表示请求失败的结果
      console.log(err);
    });
};
</script>

<style scoped></style>
